<html>
	<head>
		<script type="text/javascript" src="protovis-d3.2.js"></script>
		<script type="text/javascript">
			var scoreRecord = [
			{ year: 2004, grade: 3, subjectID: 10, sasid: 1234567890, rawScore: 17 },
			/* actual student data removed */
			{ year: 2009, grade: 8, subjectID: 10, sasid: 1234567891, rawScore: 30 } ];
		</script>

		<style type="text/css">
			td { padding-left: 5px; padding-right: 5px }
			td.label { border-right: 1px solid black;  text-align: right }
			td.num { text-align: right }
			#canvas { width: 400; height: 200 }
		</style>

	</head>
	<body>
		<table border=0 cellspacing=0 cellpadding=0>
			<tr>
				<td class=label>district</td>
				<td id=district>Northampton</td>
			</tr>
			<tr>
				<td class=label>grades</td>
				<td id=grades></td>
			</tr>
			<tr>
				<td class=label>subject IDs</td>
				<td id=subjectIDs></td>
			</tr>
			<tr>
				<td class=label>test years</td>
				<td id=years></td>
			</tr>
			<tr>
				<td class=label>number of scores</td>
				<td id=nScores></td>
			</tr>
			<tr>
				<td class=label>score range</td>
				<td id=range></td>
			</tr>
			<tr>
				<td class=label>median</td>
				<td id=median></td>
			</tr>
			<tr>
				<td class=label>standard deviation</td>
				<td id=deviation></td>
			</tr>
		</table>
		<script type="text/javascript+protovis">
			var nScores = scoreRecord.length;
			var minScore = pv.min(scoreRecord, function(r) r.rawScore);
			var maxScore = pv.max(scoreRecord, function(r) r.rawScore);
			var median = pv.median(scoreRecord, function(r) r.rawScore);
			var dev = pv.deviation(scoreRecord, function(r) r.rawScore);
			var year = pv.uniq(scoreRecord, function(r) r.year).sort();
			var grade = pv.uniq(scoreRecord, function(r) r.grade).sort();
			var subjectID = pv.uniq(scoreRecord, function(r) r.subjectID).sort();
			function setText(elementId, text) {
				document.getElementById(elementId).textContent = text;
			}
			setText('years', year.join(', '));
			setText('grades', grade.join(', '));
			setText('subjectIDs', subjectID.join(', '));
			setText('nScores', nScores);
			setText('range', minScore + ', ' + maxScore);
			setText('median', median);
			setText('deviation', dev.toFixed(0));
		</script>

		<div id="canvas">
			<script type="text/javascript+protovis">
				// histogram panel and bar
				var vis = new pv.Panel();
				var bar = vis.add(pv.Bar);
			</script>
		</div>
		<div>
			<script type="text/javascript+protovis">
				function drawHistogram(w, h, ticks) {
					var x = pv.Scale.linear(minScore, maxScore).range(0, w);
					if (ticks === undefined) {
						var bins = pv.histogram(scoreRecord, function(r) r.rawScore).bins();
					} else {
						var bins = pv.histogram(scoreRecord, function(r) r.rawScore).bins(ticks);
					}
					var y = pv.Scale.linear(0, pv.max(bins, function(b) b.y)).range(0, h);
					vis .width(w) 
						.height(h);
					bar .data(bins)
						.bottom(0)
						.left(function(b) x(b.x))
						.width(function(b) x(b.dx))
						.height(function(b) y(b.y))
						;
					vis.add(pv.Rule).data(y.ticks(5)).bottom(y)
						.anchor("top").add(pv.Label).left(20).text(y.tickFormat);
					vis.render();

					var frequencyTable = document.getElementById("frequency table");
					var olderChildren = frequencyTable.getElementsByTagName('TD');
					for (var i = 0; i < olderChildren.length; i++) {
							frequencyTable.removeChild(olderChildren[i]);
					}
					for (var i in bins) {
						var row = document.createElement("TR");
						var xvalue = document.createElement("TD");
						var xwidth = document.createElement("TD");
						var frequency = document.createElement("TD");
						var xvalue_text = document.createTextNode(bins[i].x);
						xvalue.appendChild(xvalue_text);
						var xwidth_text = document.createTextNode(bins[i].dx);
						xwidth.appendChild(xwidth_text);
						var frequency_text = document.createTextNode(bins[i].y);
						frequency.appendChild(frequency_text);
						row.appendChild(xvalue);
						row.appendChild(xwidth);
						row.appendChild(frequency);
						xvalue.style.textAlign = "right";
						xwidth.style.textAlign = "right";
						frequency.style.textAlign = "right";
						frequencyTable.appendChild(row);
					}
				}
				function changeBinWidth() {
					var newBinWidth = parseInt(document.getElementById('newBinWidth').value);
					if (isNaN(newBinWidth)) {
						alert("Enter an integer number for a new bin width.");
					} else {
						var ticks = pv.range(minScore, maxScore, newBinWidth);
						drawHistogram(400, 200, ticks);
					}
				}
			</script>
		</div>
			<label>new bin width <input type=text name=newBinWidth id=newBinWidth /></label>
			<button onclick="changeBinWidth()">apply</button>
		<table id="frequency table">
			<tr>
				<th>x</th>
				<th>dx</th>
				<th>frequency</th>
			</tr>
		</table>
	</body>
</html>
<!-- vim:set noexpandtab shiftwidth=2 tabstop=2: -->
